<!--修改联系人信息页  ————————  客户经理可查看-->
<template>
  <div id="UpdateCustomerContacts">
    <div class="breadcrumbs" style="margin: 0px;padding-top: 20px;">
      <ul>
        <li class="home"><a href="index.html" title="Go to Home Page"><strong style="font-size: 18px;">客户管理</strong></a>
          <span>/</span>
        </li>
        <li><strong>客户信息管理</strong><span>/</span></li>
        <li><strong>修改联系人</strong></li>
      </ul>
    </div>
    <article class="col-main">
      <div class="my-account block block-account" style="padding-left: 20px;">

        <div class="page-title" style="border-bottom: #F1F3F6 1px solid;">
          <h2>修改联系人</h2>
          <hr>
        </div>

        <form action="">
          <div class="form-group">
            <strong style="font-weight: 1000;font-size: 20px">联系人编号</strong>
            &nbsp;<span style="color: red;font-size: 15px">*</span>
            <div style="padding-left: 20px;">
              <input v-model="contact.contactsId" class="form-control" readonly="readonly" style="width: 400px;">
            </div>
          </div>

          <div class="form-group">
            <strong style="font-weight: 1000;font-size: 20px">联系人名字</strong>
            &nbsp;<span style="color: red;font-size: 15px">*</span>
            <div style="padding-left: 20px;">
              <input v-on:blur="checkContactName" v-model="contact.contactsName" class="form-control" placeholder="请输入联系人的名字" style="width: 400px;">
            </div>
          </div>

          <div class="form-group">
            <strong style="font-weight: 1000;font-size: 20px">性别</strong>
            <span style="color: red;font-size: 15px">*</span>
            <div style="padding-left: 20px">
              <input type="radio" v-model="contact.contactsSex" value="1"> &nbsp;男&nbsp;&nbsp;&nbsp;
              <input type="radio" v-model="contact.contactsSex" value="0"> &nbsp;女
            </div>

          </div>

          <div class="form-group">
            <strong style="font-weight: 1000;font-size: 20px">职位</strong>
            <span style="color: red;font-size: 15px">*</span>
            <div style="padding-left: 20px;">
              <input v-on:blur="checkContactPosition" v-model="contact.contactsPosition" class="form-control" placeholder="请输入联系人的职位" style="width: 400px;">
            </div>
          </div>

          <div class="form-group">
            <strong style="font-weight: 1000;font-size: 20px">手机1</strong>
            &nbsp;<span style="color: red;font-size: 15px">*</span>
            <div style="padding-left: 20px;">
              <input v-on:blur="checkContactTel" v-model="contact.contactsTel1" class="form-control" placeholder="请输入联系人的办公电话" style="width: 400px;">
            </div>
          </div>

          <div class="form-group">
            <strong style="font-weight: 1000;font-size: 20px">手机2</strong>
            <div style="padding-left: 20px;">
              <input v-on:blur="checkContactPhone" v-model="contact.contactsTel2" class="form-control" placeholder="请输入联系人的手机" style="width: 400px;">
            </div>
          </div>

          <div class="form-group">
            <strong style="font-weight: 1000;font-size: 20px">备注</strong>
            <div style="padding-left: 20px;">
              <input v-model="contact.contactsRemarks" class="form-control" placeholder="请输入联系人的备注" style="width: 400px;">
            </div>
          </div>

          <div class="text-center" style="margin-top: 40px;padding-bottom: 30px">
            <button v-on:click="updateContact" class="btn btn-primary">保存</button>
            <button v-on:click="toCustomerContactsList" class="btn btn-default">返回</button>
          </div>
        </form>

      </div>
    </article>
  </div>
</template>

<script>
export default {
  name: "UpdateCustomerContacts",
  data(){
    return{
      customerName:'',
      contact:{
        contactsId:'',
        customerId:'',
        contactsName:'',
        contactsSex:'',
        contactsPosition:'',
        contactsTel1:'',
        contactsTel2:'',
        contactsRemarks:'',
      }
    }
  },
  methods:{
    updateContact(){
      if (this.checkContactName()){
        if (this.checkContactPosition()){
          if (this.checkContactTel()){
            if (this.checkContactPhone()){
              this.$axios.put('/contacts/updateContact',this.contact).then(
                res=>{
                  this.$message({
                    showClose: true,
                    message: res.data.message,
                    type: 'success'
                  });
                  this.$router.push({path:'/MemuBar/CustomerContactsList',query:{
                      customerName:this.$route.query.customerName,customerId:this.contact.customerId}})
                }
              )
            }
          }
        }
      }
    },
    loadContacts() {
      this.customerName=this.$route.query.customerName
      this.$axios.get('/contacts/loadContactByContactId',{
        params:{
          contactId:this.$route.query.contactsId
        }
      }).then(
        res=>{
          this.contact=res.data.data
          console.log(this.contact)
        }
      )
    },
    toCustomerContactsList(){
      this.$router.push({path:'/MemuBar/CustomerContactsList',query:{
          customerName:this.$route.query.customerName,customerId:this.contact.customerId
        }})
    },
    checkContactName(){
      if (this.contact.contactsName == ''){
        this.$message({
          showClose: true,
          message: '联系人名字不可为空',
          type: 'error'
        });
        return false;
      }else {
        return true;
      }
    },
    checkContactPosition(){
      if (this.contact.contactsPosition == ''){
        this.$message({
          showClose: true,
          message: '联系人职位不可为空',
          type: 'error'
        });
        return false;
      }else {
        return true;
      }
    },
    checkContactTel(){
      var reg = /^((13\d)|(14[5,7,9])|(15[0-3,5-9])|(166)|(17[0,1,3,5,7,8])|(18[0-9])|(19[8,9]))\d{8}/;
      if (this.contact.contactsTel1 == ''){
        this.$message({
          showClose: true,
          message: '联系人手机1不可为空',
          type: 'error'
        });
        return false;
      }else if (this.contact.contactsTel1.length != 11){
        this.$message({
          showClose: true,
          message: '联系人手机1格式不正确',
          type: 'error'
        });
        return false;
      }else if (!reg.test(this.contact.contactsTel1)){
        this.$message({
          showClose: true,
          message: '联系人手机1号码不存在',
          type: 'error'
        });
        return false;
      } else {
        return true;
      }
    },
    checkContactPhone(){
      var reg = /^((13\d)|(14[5,7,9])|(15[0-3,5-9])|(166)|(17[0,1,3,5,7,8])|(18[0-9])|(19[8,9]))\d{8}/;
      if (this.contact.contactsTel1 == ''){
        return true;
      }else if (this.contact.contactsTel1.length != 11){
        this.$message({
          showClose: true,
          message: '联系人手机1格式不正确',
          type: 'error'
        });
        return false;
      }else if (!reg.test(this.contact.contactsTel1)){
        this.$message({
          showClose: true,
          message: '联系人手机1号码不存在',
          type: 'error'
        });
        return false;
      } else {
        return true;
      }
    }


  },
  created() {
    this.loadContacts()
  }
}
</script>

<style scoped>

</style>
